<%@page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@page import="java.util.Date"%>
<%@page import="java.text.SimpleDateFormat"%>
<%@page import="br.usp.ime.amazon.ResultSearch"%>
<%@page import="br.usp.ime.amazon.Book"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Amazon.com Search</title>
<link type="text/css" href="style.css" rel="styleSheet" />
<script type="text/javascript">
	function removeAuthor(element){
		var pai = element.parentNode;
		var avo = pai.parentNode;
		avo.removeChild(pai);
	}
	
	function addNewAuthor() {
		var li = document.createElement("li");
		
		var label = document.createElement("label");
		var text = document.createTextNode("Author: ");
		label.appendChild(text);
		var enter1 = document.createTextNode("\n");
		var enter2 = document.createTextNode("\n");
		var input = document.createElement("input");
		input.type = "text"; // os tipos de imput igual a quando você cria no html puro mesmo
		input.name = "inauthor";
		
		var button = document.createElement("input");
		button.type="button";
		button.value="--"
		button.setAttribute("onclick", "javaScript: removeAuthor(this)");

		li.appendChild(label);
		li.appendChild(enter1);
		li.appendChild(input);
		li.appendChild(enter2);
		li.appendChild(button);
		
		document.getElementById("ol").insertBefore(li, document.getElementById("title"));		
	}
	function validForm() {

	}
</script>
</head>
<body>
	<h1>GoogleBooks.com Search</h1>
	<form action="SearchGoogleBooks" id="form" method="post"
		onSubmit="javaScript: return validForm()">
		<fieldset>
			<legend> Information Search: </legend>
			
			<ol id="ol">
				<li>
					<label>Keywords:</label>
					<input type="text" name="keywords"/>
				</li>
				<li id="authors">
					<label > Author:  </label>
					<input type="text" name="inauthor" /> 
					<input type="button" value="+" onclick="javaScript: addNewAuthor()" />					
				</li>
				<li id="title">
					<label> Title: </label> 
					<input type="text" name="intitle" />
				</li>
				
				<li>
					<label> ISBN: </label>
					<input type="text" name="isbn" />
				</li>
				
				<li>
					<label> Publisher:</label>
				 	<input type="text" name="inpublisher" />
				</li>
				
				<li>
					<label> Subject: </label>
					<input type="text" name="subject" />
				</li>
				<li><input type="submit" name="consultar" value="Search" /></li>
			</ol>
		</fieldset>
	</form>
</body>
</html>